<template>
	<view class="all">
		<view class="top">
			<image class="back" src="@/static/back.png" mode="scaleToFill" @click="back"></image>
			<text class="text">
				添加设备
			</text>
			</view>
		<view class="main">
			  <view class="uni-common-mt">
			            <view class="uni-form-item ">
			                <view class="title">设备名称</view>
			                <input class="uni-input" focus placeholder="请输入" />
			            </view>
			            <view class="uni-form-item ">
			                <view class="title">地理位置</view>
			                <input class="uni-input" confirm-type="search" placeholder="请选择" />
			            </view>
			            <view class="uni-form-item">
			                <view class="title">设备号</view>
			                <input class="uni-input" maxlength="10" placeholder="请输入" />
			            </view>
			            <view class="uni-form-item">
			                <view class="title">排序号</view>
			                <input class="uni-input" @input="onKeyInput" placeholder="请输入" />
			            </view>
			            <view class="uni-form-item">
			                <view class="title">备注信息</view>
			               <textarea class="much" placeholder="请输入"/>
			            </view>
			        </view>
					<view class="bottom">
						<button class="button" style="background-color: rgb(0, 89, 183);" type="primary" size="mini">确认添加</button>
					</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				});
		}
	},
	}
</script>

<style lang="scss" scoped>
	
	page {
		width: 100%;
		height: 100%;
		background-color: rgb(247, 247, 247);
	}
	.all{
		width: 100%;
		height: 100%
	}
		.top {
			width: 100%;
			background-color: white;
			height: 100rpx;
			position: relative;
		
			.text {
				width:146rpx;
				height:50rpx;
				font-size:36rpx;
				font-family:PingFang SC;
				font-weight:bold;
				line-height:100rpx;
				color:rgba(51,51,51,1);
				letter-spacing:9.100000381469727px;
				opacity:1;
				margin-left: 35%;
			}
		
			.back {
				width: 20rpx;
				height: 36rpx;
				position: absolute;
				left: 20rpx;
				top: 36rpx;
			}	
		}
		
.main{
	width: 90%;
	height: 88%;
	background-color: white;
	margin: 25rpx auto;
	position: relative;
	border-radius: 3%;
	.uni-common-mt{
		
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		.uni-form-item{
			margin-top: 20rpx;
			width: 100%;
			height: 150rpx;
			border-bottom:1px solid rgba(238,238,238,1);
			.title{
				width:128rpx;
				height:45rpx;
				font-size:32rpx;
				font-family:PingFang SC;
				font-weight:bolder;
				margin-top: 20rpx;
				margin-left: 32rpx;
				color:rgb(51, 51, 51);
				opacity:1;
				
			}
			.uni-input{
				margin-top: 10px;
				margin-left: 32rpx;
			}
			.much{
				width: 88%;
				height: 200rpx;
				margin-left: 32rpx;
				margin-top: 20rpx;
				background-color: rgb(250, 250, 250);
				border: 1rpx solid rgba(234,234,234,1);
				padding-top: 20rpx;
				padding-left: 20rpx;
			}
		}
		.uni-form-item:nth-child(5){
			border: none;
		}
	}
	.bottom{
		width: 200rpx;
		text-align: center;
		position: absolute;
		bottom: 0rpx;
		left: 50%;
		margin-left: -100rpx;
	}
	.button{
		margin: 46rpx auto;
		width:100%;
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(255,255,255,1);
		opacity:1;
	}
}
</style>
